<extend name="Public:base" />
<block name="title"><title>快速注册</title></block>
<block name="header_styles">
    <style type="text/css">
        .login-section {
            margin: auto;
            width: 500px;
            padding-top: 50px;
        }

         .ema-sug-wrapper {
            z-index:999;
            position: absolute;
            background: #fff;
            text-align: left;
        }

            .ema-sug-wrapper .ema-sug-list {
                list-style: none;
                margin: 0px;
                padding: 0px;
            }

                .ema-sug-wrapper .ema-sug-list .ema-sug-item {
                    font-size: 14px;
                    height: 25px;
                    line-height: 25px;
                    padding-left: 10px;
                    color: #333;
                }

                    .ema-sug-wrapper .ema-sug-list .ema-sug-item.active {
                        background: #5cb85c;
                        cursor: pointer;
                        color: #fff;
                    }
    </style>
</block>
<block name="main">
    <div class="login-section">
        <div class="panel panel-green">
            <div class="panel-heading">
                赶快注册，开启您的般若之旅吧！
            </div>
            <div class="panel-body">
                <form id="form_signup" action="{:U('Login/signup_step2')}" method="post">

                    <div class="form-group">
                        <label class="sr-only" for="email">邮箱地址</label>
                        <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-envelope"></i></div>
                            <input type="text" class="form-control" id="email" name="email"
                                   autocomplete="off"
                                   maxlength="50"
                                   placeholder="输入邮箱，此邮箱将会作为唯一登陆账号"
                                   data-val="true" data-val-required="请输入邮箱地址"
                                   data-val-regex="请输入正确的邮箱地址"
                                   data-val-regex-pattern="^\\w+([\\.-]?\\w+)*@([a-zA-Z0-9_-])+((\\.[a-zA-Z0-9_-]{2,3}){1,2})$"
                                   data-val-remote="邮箱地址已被注册"
                                   data-val-remote-url="{:U('Login/signup_checkEmailAjax')}" />
                        </div>
                        <span data-valmsg-for="email" data-valmsg-replace="true" style="padding-left: 40px;"></span>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="email">密码</label>
                        <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-lock" style="width: 14px;"></i></div>
                            <input type="password" class="form-control" id="password" name="password" maxlength="50" placeholder="密码为6个及以上的字母、数字、符号组合。"
                                   data-val="true" data-val-required="请输入密码"
                                   data-val-regex="密码至少6位，包括数字、大小写英文字母"
                                   data-val-regex-pattern="[0-9A-Za-z]{6,16}" />
                        </div>
                        <span data-valmsg-for="password" data-valmsg-replace="true" style="padding-left: 40px;"></span>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="email">确认密码</label>
                        <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-lock" style="width: 14px;"></i></div>
                            <input type="password" class="form-control" id="confirmpwd" name="confirmpwd" placeholder="请再次确认密码"
                                   data-val="true" data-val-required="请输入确认密码"
                                   data-val-equalto="密码不匹配, 请重新输入" data-val-equalto-other="password" />
                        </div>
                        <span data-valmsg-for="confirmpwd" data-valmsg-replace="true" style="padding-left: 40px;"></span>
                    </div>
                    <div class="text-center">
                        <label class="radio-inline"><input type="radio" name="usertype" data-val="true" data-val-required="请选择用户类型" value="1" /> 个人注册</label>
                        <label class="radio-inline"><input type="radio" name="usertype" value="2" /> 企业注册</label>
                        <br />
                        <span data-valmsg-for="usertype" data-valmsg-replace="true"></span>
                    </div>


                    <div class="form-buttons text-center">
                        <button type="submit" class="btn btn-success" style="width: 170px;">创建帐号</button>
                    </div>
                    <br />
                    <div class="text-center">
                        <div class="form-control-static text-line">
                            <span>已有帐号？</span> <a href="{:U('Login/index')}" class="forgot-link">点击登陆</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</block>
<block name="footer_scripts">
    <!--<script type="text/javascript" src="__PUBLIC__/js/emailAutocomplete.js"></script>-->
    <script type="text/javascript">
        require(["jquery", "emailAutocomplete", "jquery.unobtrusive"], function ($) {
            $('#email').emailSug({
                sugClass: 'ema-sug',
                domains: [
                    'qq.com',
                    '163.com',
                    'sohu.com',
                    'sogou.com',
                    '126.com',
                    '139.com',
                    'sina.com',
                    'gmail.com',
                    'hotmail.com'
                ]
            });

            $("#email").change(function () {
                var value = $(this).val();
                $(this).val(value.trim());
            });

            $.validator.setDefaults({
                onfocusout: function (element) {
                    $(element).valid();
                }, onkeyup: false, onclick: false
            });

        });

    </script>
</block>